<style>
    .assign-user {
        border: none;
        padding-top: 8px;
        margin-left: 20px;
        width: 120px;
    }
    .assign-user .ui-select-toggle {
        border: none;
    }
    .assign-user .ui-select-toggle .ui-select-match-text{
        color: #337ab7;
    }
    .select-tree {
        margin-right: 20px;
    }
    .select-tree .tree-input{
        border: none;
        color: #337ab7;
        width: 150px;
    }
    .breadcrumb{
        padding: 0;
        margin-top: 13px;
    }
</style>
<!-- navbar header -->
<div class="navbar-header {{app.settings.navbarHeaderColor}}">
    <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
        <i class="glyphicon glyphicon-cog"></i>
    </button>
    <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll-to="app">
        <i class="glyphicon glyphicon-align-justify"></i>
    </button>
    <!-- brand -->
    <span class="navbar-brand text-lt">
          <img src="img/matrix-logo-mini.png"></i>
        <!--           <img class="icon-diamond" alt="." class="hide">
         -->          <span class="hidden-folded m-l-xs">{{app.name}}</span>
        </span>
    <!-- / brand -->
</div>
<!-- / navbar header -->

<!-- navbar collapse -->
<div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">
    <!-- buttons -->
    <div class="nav navbar-nav hidden-xs">
        <a href class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
            <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
        </a>
        <winit-breadcrumb menu-list="breadcrumb"></winit-breadcrumb>
    </div>

    <!--<ul class="nav navbar-nav navbar-left">-->
    <!--<li class="hidden-xs">-->
    <!--<a>{{app.page.name}}</a>-->
    <!--</li>-->
    <!--</ul>-->
    <ul class="nav navbar-nav hidden-sm" ng-show="app.headerPanel.search.show == true">
        <li class="dropdown" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
                <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                <span >{{search.value}}</span>

                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a  ng-click="onBusines(null)">全部业务线</a></li>
                <li class="divider"></li>
                <li><a ng-repeat="y in business" ng-click="onBusines(y)">{{y.value}}</a></li>
            </ul>
        </li>
    </ul>

    <!-- 请输入过滤条件 -->
    <div class="navbar-form navbar-form-sm navbar-left shift hide" ui-shift="prependTo" target=".navbar-collapse"
         role="search" ng-show="app.headerPanel.search.show == true" >
        <div class="form-group">
            <div class="input-group">
                <input type="text" id="matrixHeaderFilter"  ng-model="app.headerPanel.search.keyword"
                       class="form-control input-sm bg-light no-border rounded padder" ng-change="app.headerPanel.search.fun()" placeholder="请输入列表过滤条件...">
                <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-primary rounded"><i class="fa fa-search"></i></button>
              </span>
            </div>
        </div>
    </div>
    <!-- / search form -->

    <!-- 全部类型 -->
    <ul class="nav navbar-nav hidden-sm" ng-show="app.headerPanel.issueShow == true">
        <li class="dropdown" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
                <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                <span>{{crtIssue ? crtIssue : "全部业务线"}}</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a ng-click="issueClick()">全部业务线</a></li>
                <li class="divider"></li>
                <li><a ng-repeat="issue in issueList" ng-click="issueClick(issue)">{{issue.value}}</a></li>
            </ul>
        </li>
    </ul>
    <!-- end 全部类型 -->

    <!-- 查询框（单个查询，不与业务关联） -->
    <ul class="nav navbar-nav hidden-sm" ng-show="app.headerPanel.search.show == true || app.headerPanel.issueShow == true">
        <div class="form-group" style="padding-top: 10px; margin-left: 20px; width: 220px;">
            <div class="input-group">
                <input type="text"
                       id="matrixReqPondFilter"
                       class="form-control input-sm bg-light no-border rounded padder"
                       placeholder="请输入..."
                       ng-model="searchIssue.value">
                <span class="input-group-btn">
                    <!-- <button type="button" class="btn btn-sm bg-primary rounded" ng-click="searchClick()" style="line-height: 18px;"><i class="fa fa-search"></i></button> -->
                    <button type="button" class="btn btn-sm bg-primary rounded" ng-click="app.searchBtn.func(searchIssue.value)" style="line-height: 18px;"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
    </ul>
    <!-- end 查询框 -->

    <!-- *************************************************************************** -->
    <!-- 选择框树 -->
    <ul class="nav navbar-nav hidden-sm" ng-show="headerElemets.sltTree.show">
        <div class="assign-user select-tree">
            <multi-select-tree  data-input-model="headerElemets.sltTree.data"
                                multi-select="false"
                                data-crt-value="{{headerElemets.sltTree.name}}"
                                data-default-label="{{headerElemets.sltTree.label}}"
                                data-callback="headerElemets.sltTree.func(item)"
                                data-cancel-select="headerElemets.sltTree.cancelFunc(item)"
                                data-select-only-leafs="false">
            </multi-select-tree>
        </div>
    </ul>
    <!-- 加载多个下拉框 -->
    <ul class="nav navbar-nav hidden-sm" ng-repeat="ele in headerElemets.selectEle" ng-show="ele.status">
        <li class="dropdown" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
                <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
                <span>{{ele.crtName ? ele.crtName : ele.label}}</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a ng-click="ele.func()">{{ele.label}}</a></li>
                <li class="divider"></li>
                <li><a ng-repeat="item in ele.eleList" ng-click="ele.func(item)">{{item.name}}</a></li>
            </ul>
        </li>
    </ul>
    <!-- 加载多个ui-select框 -->
    <ul class="nav navbar-nav hidden-sm" ng-repeat="ele in headerElemets.uiSltEle" ng-show="ele.status">
        <div class="assign-user" ng-style="{width: (ele.width ? ele.width : '120px')}">
            <m-ui-select  prompt="{{ele.prompt}}"
                          itme-list="ele.items"
                          selected-item="ele.selectedItem"
                          select-item-fun="ele.func(item)">
            </m-ui-select>
        </div>
    </ul>
    <!-- 查询框 -->
    <ul class="nav navbar-nav hidden-sm" ng-show="headerElemets.searchEle.show">
        <div class="form-group" style="padding-top: 10px; margin-left: 20px; width: 220px;">
            <div class="input-group">
                <input type="text"
                       class="form-control input-sm bg-light no-border rounded padder"
                       placeholder="请输入查询内容..."
                       ng-model="headerElemets.searchEle.searchValue"
                       ng-blur="headerElemets.searchEle.blurFunc(headerElemets.searchEle.searchValue)">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-sm bg-primary rounded" ng-click="headerElemets.searchEle.func(headerElemets.searchEle.searchValue)" style="line-height: 18px;"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
    </ul>
    <!-- btn元素 -->
    <ul class="nav navbar-nav hidden-sm" ng-repeat="ele in headerElemets.btnEle" ng-show="ele.show">
        <li class="hidden-xs">
            <a href class="dropdown-toggle" dropdown-toggle ng-click="ele.func()">
                <span>{{ele.label}}</span>
            </a>
        </li>
    </ul>
    <!-- *************************************************************************** -->

    <!--header buttons-->
    <ul class="nav navbar-nav hidden-sm" ng-show="app.headerPanel.buttons.length > 0">
        <li class="hidden-xs" ng-repeat="(key, button) in app.headerPanel.buttons">
            <a href class="dropdown-toggle" dropdown-toggle ng-click="button.func()">
                <span>{{button.title}}</span>
            </a>
        </li>
    </ul>
    <ul class="nav navbar-nav hidden-sm"
        ng-if="app.headerPanel.message != undefined && app.headerPanel.message != null && app.headerPanel.message != ''">
        <li class="hidden-xs">
            <a class="dropdown-toggle">
                <span style="color: red;">{{app.headerPanel.message}}</span>
            </a>
        </li>
    </ul>



    <!-- nabar right -->
    <ul class="nav navbar-nav navbar-right">
        <li class="hidden-xs">
            <a ui-fullscreen></a>
        </li>

        <li class="dropdown" dropdown>
            <a href class="dropdown-toggle clear" dropdown-toggle>
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="img/a0.jpg" alt="...">
                <i class="on md b-white bottom"></i>
              </span>
                <span class="hidden-sm hidden-md">{{userName()}}</span> <b class="caret"></b>
            </a>
            <!-- dropdown -->
            <ul class="dropdown-menu animated fadeInRight w">
                <!--<li>-->
                <!--<a ui-sref="">-->
                <!--<span class="label bg-info pull-right">new</span>-->
                <!--修改密码-->
                <!--</a>-->
                <!--</li>-->
                <li class="divider"></li>
                <li>
                    <a ui-sref="app.password">修改密码</a>
                </li>
                <li>
                    <a ui-sref="access.signin">退出登录</a>
                </li>
            </ul>
            <!-- / dropdown -->
        </li>
    </ul>
    <!-- / navbar right -->

</div>
<!-- / navbar collapse -->
